<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="draw"></canvas>
    <script>
        const canvas = document.getElementById('draw');
        // 获取绘图上下文的引用
        const context = canvas.getContext('2d');

        // 把画布设为整个浏览器窗口大小, width&height是html5标签属性, 不是css属性
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 设置笔触形态
        context.lineWidth = 100; // 描边宽度
        context.lineCap = "round"; // 线条端点的形状
        context.lineJoin = "round"; // 线条交点的形状
        context.fillStyle = "#bfa" // 填充颜色
        context.strokeStyle = "#bfa" // 描边颜色

        let isDrawing = false; // 判断是否在画画
        let hue = 0; // 记录颜色变化
        let direction = true; // 判断笔刷大小是递减还是递增
        let lastX = 0; // 记录起始x坐标
        let lastY = 0; // 记录起始y坐标
        let x = 0; // 记录终点x坐标
        let y = 0; // 记录终点y坐标

        // 鼠标事件
        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true; // 表示开始画画
            // 解构赋值, offset为偏移距离, 鼠标按下时lastXY记录起始位置
            [lastX, lastY] = [e.offsetX, e.offsetY];
        });
        canvas.addEventListener('mousemove', drawing); // 移动时执行函数
        // 鼠标松开/鼠标离开canvas时, isDrawing记录画画停止
        canvas.addEventListener('mouseup', () => isDrawing = false);
        canvas.addEventListener('mouseout', () => isDrawing = false);

        // 触摸屏事件
        canvas.addEventListener('touchstart', (e) => {
            isDrawing = true;
            lastX = e.changedTouches[0].clientX;
            lastY = e.changedTouches[0].clientY;
        });
        canvas.addEventListener('touchmove', draw);
        canvas.addEventListener('touchend', () => isDrawing = false);
        canvas.addEventListener('touchcancel', () => isDrawing = false);

        function drawing(e) {
            if (!isDrawing) return; // 不画画时不执行

            // 记录鼠标移动后终点位置     
            if (e.type == "mousemove") {
                x = e.offsetX;
                y = e.offsetY;
            } else {
                // 处理触摸屏操作
                x = e.changedTouches[0].clientX;
                y = e.changedTouches[0].clientY;
            }

            // 彩虹笔刷效果
            context.strokeStyle = `hsl(${hue}, 90%, 50%)`; // hsl颜色数值控制变化
            if (hue >= 360) hue = 0; // 循环一轮后重置
            hue++; // 每移动一点就变换颜色

            // 大小笔触效果
            if (context.lineWidth >= 100 || context.lineWidth <= 5) {
                // 达到峰值时换方向递增/递减
                direction = !direction;
            }
            if (direction) {
                context.lineWidth++;
            } else {
                context.lineWidth--;
            }

            // 控制绘制路径
            context.beginPath();
            context.moveTo(lastX, lastY);
            context.lineTo(x, y);
            context.stroke(); // 填充
            [lastX, lastY] = [x, y]; // 上一次的停止为上一次的起始

        }
    </script>
</body>

</html>